<template>
  <div class="theme-color" h="77px" w="full" bg="light-200">
    <div class="flex mx-auto my-0" h="full" w="1284px">
      <div class="flex-1" font="font-sans" h="full" text="5xl">
        <span class="flex items-center" h="full" text="dBlue">LOGO</span>
      </div>
      <div class="list" w="951px">
        <div class="inline-flex flex-1" h="full" w="743px">
          <div
            class="item flex-1 justify-center"
            text="16px"
            h="full"
            v-for="(item, index) of routerList"
            :key="index"
          >
            <span
              class="str flex items-center hover:(transition-all)"
              :class="index == indexRef ? 'active' : ''"
              h="full"
              @click="handleToRouter(index)"
              >{{ item.str }}</span
            >
          </div>
        </div>
      </div>
      <div class="btn-list flex-1 flex justify-center items-center">
        <button class="flex-1 btn mr-8px" h="40px" w="100px" @click="toLogin()">
          登录
        </button>
        <button class="flex-1 btn" h="40px" w="100px" @click="toRegister()">
          免费注册
        </button>
        <button
          class="flex-1 btn"
          h="40px"
          w="100px"
          style="margin-left: 8px"
          @click="setTheme(true)"
        >
          切换主题
        </button>
      </div>
    </div>
  </div>
  <register-dialog
    @close="closeRegisterDialog"
    :dialogVisible="registerDialogVisible"
  ></register-dialog>
</template>
<script>
import { reactive, onBeforeMount, ref } from "vue";
import vButton from "@/components/util/vButton.vue";
import registerDialog from "@/components/global/registerDialog.vue";
import { useRouter } from "vue-router";
export default {
  components: {
    vButton,
    registerDialog,
  },
  emits:["change-router"],
  name: "vHeader",
  setup(props, { emit }) {
    const router = useRouter();
    let indexRef = ref("0");
    let routerList = reactive([
      {
        str: "首页",
        path: "/",
      },
      {
        str: "签证办理",
        path: "/handlevisa",
      },
      {
        str: "机票",
        path: "/planeticket",
      },
      {
        str: "保险商城",
        path: "/insuremall",
      },
      {
        str: "签证知识",
        path: "/visastudy",
      },
      {
        str: "关于我们",
        path: "/aboutUs",
      },
    ]);
    onBeforeMount(() => {
      setTheme(false);
    });
    // 设置登录和注册的路由跳转
    let login = reactive({ str: "登录", path: "/loginRegister/login" });
    // let register = reactive({str: "注册",path: "/loginRegister/register"});
    const toLogin = () => {
      router.push({
        path: login.path,
        str: login.str,
      });
    };
    // 控制注册弹窗
    let registerDialogVisible = ref(false);
    // let registerDialogVisible = ref(false);
    const closeRegisterDialog = () => {
      registerDialogVisible.value = false;
    };
    const toRegister = () => {
      registerDialogVisible.value = true;
      // router.push({
      //     path:register.path,
      //     str:register.str
      // })
    };
    const handleToRouter = (index) => {
      indexRef.value = index;
      emit("change-router", routerList[index]);
    };
    //明暗主体
    let themeFlag = ref("light");
    const setTheme = (isChangeTheme) => {
      let theme = localStorage.getItem("theme") || "light";
      themeFlag.value = theme;
      if (isChangeTheme) {
        localStorage.setItem("theme", theme == "light" ? "dark" : "light");
        themeFlag.value = theme == "light" ? "dark" : "light";
      }
      if (localStorage.getItem("theme") === "dark") {
        document.querySelector("html").classList.add("dark");
      } else {
        document.querySelector("html").classList.remove("dark");
      }
    };
    return {
      routerList,
      indexRef,
      handleToRouter,
      setTheme,
      toLogin,
      toRegister,
      registerDialogVisible,
      closeRegisterDialog,
    };
  },
};
</script>
<style scoped>
.item {
  display: flex;
  align-items: center;
  /* justify-content:center; */
  z-index: 500;
}
.str {
  /* display: flex;
    align-items: center; */
  cursor: pointer;
}
.str.active {
  border-bottom: 1px solid #3385ff;
  color: #3385ff;
}
/* .item span {
    height: 60px;
    line-height: 60px;
} */
.btn {
  @apply border-1 border-dTextBlack rounded-5px border-solid;
}
/*主题色改变通用类*/
.theme-color {
  @apply bg-white dark:bg-cool-gray-800 text-gray-700 dark:text-white border-transparent transition transition-all duration-300 ease-in-out border-r dark:border-cool-gray-700;
}
</style>
